<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 角色绑定用户
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <span class="mr10" style="margin-right:10px">请选择要操作的系统角色</span>
                <el-select v-model="query.sid" placeholder="平台内角色" value-key = "" class="handle-select mr10" @change="func_handleSearch">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="item in role_Opts" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                </el-select>
                <el-dropdown split-button type="primary" @click="func_handleSearch" ><i class="el-icon-search mr10"/>搜索
                    <template #dropdown>
                        <el-dropdown-menu >
                        <el-dropdown-item icon="el-icon-edit" @click="func_handleAddBut">绑定平台用户</el-dropdown-item>
                        <el-divider />
                        <el-dropdown-item icon="el-icon-delete" @click="func_handleDelBut">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <el-table v-loading="isLoading" :data="role_member_table_data" border class="table" ref="multipleTable" :max-height="750" fit highlight-current-row
            element-loading-background = "rgba(255, 255, 255, .5)" element-loading-text = "加载中，请稍后..." element-loading-spinner = "el-icon-loading"
            @selection-change="(selections)=> {func_handleSelectionChange(selections,'true')}"
            @select-all="(selections)=> {func_handleSelectionAll(selections,'true')}"
            header-cell-class-name="table-header">
                <el-table-column type="selection" width="50" align="center"/>
                <el-table-column prop="uid" label="ID" width="55" align="center"/>
                <el-table-column label="识别码" v-if="false" align="center">
                    <template #default="scope">
                    {{scope.row.id}}, {{scope.row.sid}},{{scope.row.usid}},{{scope.row.uisAdmin}},{{scope.row.ustatus}}
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" align="center"/>
                <el-table-column prop="uphone" label="手机号" align="center"/>
                <!-- <el-table-column prop="uisAdmin" label="手机号"/> -->
                <!-- <el-table-column prop="ustatus" label="状态"/> -->
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-delete" class="red" @click="func_table_handle_member_delete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="func_table_handle_pagesize_change" @current-change="func_table_handle_page_change"
                background layout="total, sizes, prev, pager, next,"
                 :current-page="query.pageIndex"
                 :page-sizes=[10,50,100]
                 :page-size="query.pageSize"
                 :total="total" ></el-pagination>
            </div>
        </div>
        <!-- 关联用户查询对话框 ----------------------------------------------------------------------------------------------------- -->
        <el-dialog title="用户列表" v-model="view_dialog_member_table_visible" width="75%" :close-on-click-modal="false">
            <div class="handle-box">
                <el-input v-model="query_member_search.keyword" placeholder="用户名" class="handle-input mr10"/>
                <el-button type="primary" icon="el-icon-search" @click="func_dialog_member_table_search">搜索</el-button>
            </div>
            <el-table :data="dialog_member_table_data" border class="table" ref="multipleTable" :max-height="750" fit highlight-current-row
            element-loading-background = "rgba(255, 255, 255, .5)" element-loading-text = "加载中，请稍后..." element-loading-spinner = "el-icon-loading"
            @selection-change="(selections)=> {func_handleSelectionChange(selections,'true')}"
            @select-all="(selections)=> {func_handleSelectionAll(selections,'true')}"
            header-cell-class-name="table-header">
                <el-table-column type="selection" width="50"/>
                <el-table-column prop="id" label="ID" width="55" align="center"/>
                <el-table-column prop="sid" label="身份识别码" v-if="false">
                    {{scope.row.sid}}, {{scope.row.isAdministration}}, {{scope.row.status}}
                </el-table-column>
                <el-table-column prop="username" label="用户名"/>
                <el-table-column prop="phone" label="手机号"/>
                <el-table-column prop="strIsAdministration" label="用户身份"/>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="func_dialog_member_table_pagesize_change" @current-change="func_dialog_member_table_page_change"
                background layout="total, sizes, prev, pager, next," 
                        :current-page="query_member_search.pageNum"
                        :page-sizes=[10,50,100]
                        :page-size="query_member_search.pageSize"
                        :total="dialog_member_data_total" >
                </el-pagination>
            </div>
            <el-row>
                <el-col :span="20"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">
                    <el-button round type="success" icon="el-icon-check" @click="func_table_handle_member_confirm" >确定</el-button>
                    <el-button round icon="el-icon-close" @click="view_dialog_member_table_visible = false" >取消</el-button></div>
                </el-col>
            </el-row>
        </el-dialog>
        <!-- 关联用户查询对话框 ----------------------------------------------------------------------------------------------------- -->
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchMemberData, fetchRoleMembers, fetchRoleOptData, editRoleMemberConn, delRoleMemberConn } from "../../api/uc";

export default {
    name: "roleMemberTable",
    setup() {
        let SUCCMESS_DIALOG_MESSAGE = "操作成功";
        let FAILD_DIALOG_MESSAGE = "操作失败";
        let ERROR_CHOOSE_ROLE_MEMBER_EMPTY = "请选择一个要删除的用户";
        // 表单loading: true,
        const isLoading = ref(true);
        // 外置列表总页数
        const total = ref(0);
        // 角色查询条件
        const query = reactive({
            sid: "",
            pageNum: 1,
            pageSize: 10,
        });
        const role_Opts = ref([{
            key :'',
            label :'',
            value :'',
        }]);
        // 角色用户列表
        const role_member_table_data = ref([{
            id: 0,
            sid: '',
            usid: '',
            username: '',
            uphone: '',
            uisAdmin:0,
            ustatus: ''
        }]);
        const role_member_form = ([{
            id: 0,
            sid: '',
            usid: '',
            username: '',
            uphone: '',
            uisAdmin:0,
            ustatus: ''
        }]);
        // 全用户检索条件
        const query_member_search = reactive({
            keyword: "",
            pageNum: 1,
            pageSize: 10,
            activeStatus: 1,
        });
        const fun_init_role_opt = () => {
            fetchRoleOptData().then((res)=> {
                role_Opts.value = res.data.data;
            });
        };
        fun_init_role_opt();
        // 公共 数据表多选临时存储
        let multipleTable = ref([]);
        let multipleSelectData =reactive([]);
        /**
         * @name 公共 列表内选择数据
         * @description 勾选的回调函数，返回全部勾选值
         */
        const func_handleSelectionChange = (selections,param) => {
            multipleSelectData =selections;
        };
        /**
         * @name 公共 列表内全选数据
         * @description 勾选的回调函数，返回全部勾选值
         */
        const func_handleSelectionAll = (selections,param) => {
            multipleSelectData = selections;
        };
        // 获取表格数据
        const func_getData = () => {
            if(query.sid == "" || query.sid.length ==0){
                isLoading.value = false;
                role_member_table_data.value = null;
                return;
            }
            fetchRoleMembers(query).then((res) => {
                if(res.data.code == 200) {
                    role_member_table_data.value = res.data.data.list;
                    total.value = res.data.data.total;
                    isLoading.value = false;
                }
            }).catch(_ => { isLoading.value = false;});
        };
        const func_del_data = () => {
            if(multipleSelectData.length ===0){
                ElMessage.warning(ERROR_CHOOSE_ROLE_MEMBER_EMPTY);
                return;
            };
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",}).then(() => {
                // 获取关系数据的关键ID，执行删除请求
                let connIds = multipleSelectData.map((item) => item.id);
                delRoleMemberConn(connIds).then((res) => {
                    if(res.data.code != 200) {
                        if(res.type == 0) {
                            ElMessage.warning(res.data.msg);
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    } else {
                        ElMessage.success(SUCCMESS_DIALOG_MESSAGE);
                        isLoading.value = true;
                        func_getData(); // 刷新数据
                    }
                }).catch(_ => {});
            }).catch(() => {});
        }
        func_getData();
        // 查询操作
        const func_handleSearch = () => {
            query.pageIndex = 1;
            func_getData();
        };
        /**
         * @name 添加操作
         */
        const func_handleAddBut = () => {
            view_dialog_member_table_visible.value = true;
            role_member_form.sid = query.sid;
            func_dialog_member_table_search();
        }
        /**
         * 标签内方法
         * @name 资源批量删除方法
         * @description 主按钮下拉的批量删除操作
         */
        const func_handleDelBut = (but,event) => {
            if(multipleSelectData.length ===0) {
                ElMessage.warning(ERROR_CHOOSE_DEL_MEMBER_EMPTY);
                return;
            }
            let _v = multipleSelectData.map((item) => item.id);
            func_del_data(_v);
        };
        // 分页导航
        const func_table_handle_page_change = (val) => {
            query.pageIndex = val;
            func_getData();
        };
        // 分页导航
        const func_table_handle_pagesize_change = (val) => {
            query.pageSize = val;
            func_getData();
        };
        /**
         * Drawer 标签内方法
         * @name 角色与用户关系表格内删除方法
         */
        const func_table_handle_member_delete = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
            }).then(() => {
                let connIds = [row["id"]];
                delRoleMemberConn(connIds).then((res) => {
                    ElMessage.success({ type: 'success', duration: 3000, message: "删除成功" });
                    isLoading.value = true;
                    func_getData();
                }).catch(_ => {});
            }).catch(() => {});
        };
        /**
         * Drawer 标签内方法
         * @name 角色与用户关联保存
         * @description 选中的用户与当前角色进行关系绑定
         */
        const func_table_handle_member_confirm = () => {
            let memberIds = multipleSelectData.map((item) => item.id);
            let param = {
                rsid: role_member_form.sid,
                memberIds:memberIds
            }
            editRoleMemberConn(param).then((res) => {
                if(res.data.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success({type: 'success',duration: 3000,message: res.data.msg});
                    view_dialog_member_table_visible.value = false;
                    isLoading.value = true;
                    func_getData();
                }
            }).catch(_ => {});
        };
        /**
         * ----------------------------------------------------对话框内方法-------------------------------------------------*/
        const view_dialog_member_table_visible = ref(false);
        // 全用户对话框用户列表
        const dialog_member_table_data = ref([{
            id: 0,
            sid: '',
            username: '',
            phone: '',
            isAdministration:0,
            strIsAdministration: ''
        }]);
        // 全用户对话框用户列表总数
        const dialog_member_data_total = ref(0);
        /**
         * Drawer 标签内方法
         * @name 对话框内全用户检索
         * @description
         */
        const func_dialog_member_table_search =()=> {
            query_member_search.pageNum = 1;
            query_member_search.pageSize=10;
            query_member_search.activeStatus=1
            fetchMemberData(query_member_search).then((res) => {
                dialog_member_table_data.value = res.data.data.list;
                dialog_member_data_total.value = res.data.data.total;
            });
            // 显示用户对话框
            view_dialog_member_table_visible.value = true;
        };
        /**
         * Drawer 标签内方法
         * @name 对话框内全用户检索 分页导航
         * @description
         */
        const func_dialog_member_table_page_change = (val) => {
            // 初始化用户列表
            query_member_search.pageNum = val;
            query_member_search.pageSize=10;
            query_member_search.activeStatus=1
            func_dialog_member_table_search(query_member_search);
        };
        /**
         * Drawer 标签内方法
         * @name 对话框内全用户检索 分页数量查询
         * @description
         */
        const func_dialog_member_table_pagesize_change = (val) => {
            // 初始化用户列表
            query_member_search.pageSize= val;
            query_member_search.activeStatus=1
            func_dialog_member_table_search(query_member_search);
        };
        return {
            isLoading, query, total,
            query_member_search,
            role_member_table_data, role_member_form, role_Opts,
            dialog_member_table_data, dialog_member_data_total,
            func_handleSearch, func_handleAddBut, func_handleDelBut,
            func_getData,
            func_handleSelectionChange, func_handleSelectionAll, func_table_handle_page_change, func_table_handle_pagesize_change,
            func_table_handle_member_delete,
            view_dialog_member_table_visible,
            func_dialog_member_table_search, func_dialog_member_table_page_change, func_dialog_member_table_pagesize_change, func_table_handle_member_confirm,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 200px;
}
.handle-switch {
    width: 180px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
